import {DatePicker} from "antd";
import React, {useEffect, useState} from 'react';
import dayjs from "dayjs";

function DatePickerFormat(props) {
  const {value, onChange, format} = props
  const [date, setDate] = useState(null);

  useEffect(() => {
    if (value) {
      setDate(dayjs(value))
    }
  }, [value]);

  useEffect(() => {
    if (date) {
      let newValue = date.format(format || 'YYYY-MM-DD')
      if (newValue !== value) {
        onChange(newValue)
      }
    }
  }, [date]);

  return (
    <DatePicker value={date} onChange={setDate}/>
  );
}

export default DatePickerFormat;